<template>
<div class="login-container">
  <div class="login-box">
        <!-- 头像区域 -->
        <div class="text-center avatar-box">
            <img  src="../../../assets/logo.png" class="img-thumbnail avatar logo" alt="">
        </div>
        <!-- 表单区域 -->
        <div class="form-login p-4">
        <!-- 登录名称 -->
        <div class="form-group form-inline transright">
            <label for="username">登录名称</label>
            <input type="text" class="form-contral ml-2" id="username" placeholder="请输入登入名" autocomplete="off" v-model.trim="username">
        </div>
        <!-- 登录密码 -->
        <div class="form-group form-inline transright">
             <label for="password">登录密码</label>
             <input type="password" class="form-contral ml-2" id="password" placeholder="请输入登录密码" autocomplete="off" v-model="password" >
        </div>
        <!-- 登录和重置密码 -->
        <div class="btn" style="margin-left:100px;">
            <button type="button" class="btn btn-secondary" style="margin-right:5px">重置</button>
            <button type="button" class="btn btn-primary" @click="getMessage">登录</button>
        </div>
        </div>
     </div>
</div>
</template>

<script>
export default {
    name:'MyLogin',
   
    data(){
        return{
            // 记录登录的数据
            username:'',
            password:''
        }
    },
   
    methods:{
        // 获取到用户的登录信息
        getMessage(){
            console.log(this.username);
            if(this.username!=='admin' || this.password!=='123456') {
                localStorage.removeItem('token')
                return alert('登录账号或密码有误！！')
                }
            
            this.$router.push('/home')
            localStorage.setItem('token','Bearer xxx')

        }

    }

}
</script >

<style lang="less" scoped>
.login-container{
    background-color:rgb(58,72,95);
        height: 100%;
      padding: 200px 0;
}
    .login-box{
        width: 400px;
        height: 300px;
        border: 1px solid  #efefef;
       margin: auto;
        background-color: white;
    }
    .logo{
        width:100px ;
        height: 100px;
        border-radius: 50px;
        border: 1px solid #efefef;
    }
    .transright{
        margin-left: 20px;
    }
</style>